<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../lib/mootools-core-1.4.5-full-compat.js" type="text/javascript"></script>
    <script src="index.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.addEvent('domready', function(){
            new Tab('tab',{
                tabChangeEvent:'mouseover'
            });
        });
    </script>
    <style>

        .tabTitles{
            margin: 0;
            border-bottom: 1px solid #DDD;
            height: 33px;
            width: 100%;
        }
        .tabTitle {
            text-align: center;
            margin-right: 10px;
            font-size: 0.8em;
            background: #F4F5F5;
            float: left;
            background: -moz-linear-gradient(top, #FDFDFD, #F4F5F5);
            background: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#F4F5F5));
            border: 1px solid #CCC;
            border-bottom: none;
            color: #777;
            filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FDFDFD', EndColorStr='#F4F5F5');
            padding: 8px 0 0;
            height: 24px;
            width: 74px;
            -moz-border-radius-topleft: 6px;
            -moz-border-radius-topright: 6px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            list-style: none;
            cursor: pointer;
        }
        .tabTitle.selected {
            color: #B86364;
            height: 25px;
        }
        .tabContent {
            display: none;
            background: #F4F5F5;
            padding: 15px 0;
        }
        .tabContent.selected {
            display: block;
        }
    </style>
</head>
<body>
    <div id="tab">
        <ul>
            <li>啊啊啊</li>
            <li>哦哦哦</li>
            <li>呃呃呃</li>
        </ul>
        <div>
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            <div>sssssss</div>
        </div>
        <div>
            哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦
        </div>
        <div>
            呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃呃
        </div>
    </div>
</body>
</html>